<script setup lang="ts">
import { getAllDep } from '@/services/consult'
import type { ChildDep, DepResponseInfo } from '@/types/consult'
import { computed, onMounted, ref } from 'vue'
import { useConsultStore } from '@/stores'

// 获取所有科室--一级科室
const allDep = ref<DepResponseInfo[]>([])
// 二级科室
const allChildDep = computed<ChildDep[]>(() => {
  return allDep.value[active.value]?.child
})
const getAllDeps = async () => {
  const data = await getAllDep()
  allDep.value = data.data
}
// 以及科室选中项
const active = ref(0)
// 选择科室
const store = useConsultStore()
const pickDep = (item: ChildDep) => {
  store.setDepInfo(item.name)
}
onMounted(() => {
  getAllDeps()
})
</script>

<template>
  <div class="dep-consult-page">
    <DP-NavBar
      title="选择科室"
      :back="
        () => {
          $router.push({ name: 'faseConsult' })
        }
      "
    ></DP-NavBar>
    <div class="container">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="(item, index) in allDep"
          :key="index"
          :title="item.name"
          @click="active = index"
        />
      </van-sidebar>
      <div class="childDep">
        <router-link
          to="/consult/illness"
          v-for="(item, index) in allChildDep"
          :key="index"
          @click="pickDep(item)"
          >{{ item.name }}</router-link
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dep-consult-page {
  margin-top: 46px;
  .container {
    display: flex;
    height: 93.1vh;
    .van-sidebar {
      width: 114px;
      .van-sidebar-item {
        font-size: 14px;
        color: var(--cp-tag);
        padding: 14px;
        &--select {
          color: var(--cp-main);
          font-weight: 400;
          &::before {
            display: none;
          }
        }
      }
    }
    .childDep {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      > a {
        // padding: 14px;
        padding: 14px 30px;
        color: var(--cp-dark);
      }
    }
  }
}
</style>
